<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .content {
      width: 1200px;
      margin: 30px auto;
    }
    .image-list {
      width: 200px;
      float: left;
      margin-right: 40px;
    }
    ul {
      width: 200px;
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
      width: 190px;
      height: 190px;
      border: 5px solid gray;
      cursor: pointer;
    }
    li img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .canvas-container {
      float: left;
    }
    #canvas {
      background: url("./imgs/grid.jpg") 0% 0%;
      background-size: 20px 20px;
    }
    .setting-area {
      float: left;
      margin-left: 20px;
    }
    .setting-area div {
      margin-top: 20px;
    }
    .result {
      background: lightcyan;
      min-height: 100px;
    }
  </style>
  <body>
    <div class="content">
      <div class="image-list">
        <ul>
          <li>
            <img src="./imgs/1.jpg" alt="" />
          </li>
          <li>
            <img src="./imgs/2.jpg" alt="" />
          </li>
          <li>
            <img src="./imgs/3.jpg" alt="" />
          </li>
          <li>
            <img src="./imgs/4.jpg" alt="" />
          </li>
          <li>
            <img src="./imgs/5.png" alt="" />
          </li>
          <li>
            <img
              src="https://cdn-oss.eclickmuse.com/creative/sync/98622cb1f097c2e0d8ee2971d5e3e0db_thumbnail.jpg"
            />
          </li>
        </ul>
      </div>
      <div class="canvas-container">
        <div>
          <canvas id="canvas" width="500" height="500">不支持Canvas</canvas>
        </div>
        <div style="margin-top: 20px">base64图片</div>
        <div class="result" id="result"></div>
      </div>
      <div class="setting-area">
        <div>
          橡皮擦大小
          <select name="" id="eraserWidthSelect">
            <option value="10">10px</option>
            <option value="40" selected>20px</option>
            <option value="80">30px</option>
            <option value="100">40px</option>
          </select>
        </div>
        <div>
          橡皮擦形状
          <select name="" id="eraserShapeSelect">
            <option value="circle" selected>圆形</option>
            <option value="rectangle">方形</option>
          </select>
        </div>
        <div>
          <button id="btn">转成base64</button>
        </div>
      </div>
    </div>
  </body>
  <script src="./index.js"></script>
</html>
